<template>
  <!-- 具备一个宽高的dom -->
  <div ref="main" style="height: 879px ;width: 100%;margin: 0;padding: 0;overflow: hidden" @dblclick="revertMap"></div>
</template>

<script>
// 导入echarts
import * as echarts from 'echarts';
// 中国地图
import chianJson from './china.json'
// 导入echarts主题
require('./chalk')
// axios
import axios from 'axios'
// 各省份对应的矢量数据地址
import {getProvinceMapInfo} from './map-utils'

import Api from '@/api/pages/wuye/house.js';
import wuyeApi from '@/api/pages/wuye/wuye.js';
export default {
  name: "china-map",
  data() {
    return {
      chart: '',
      formInline:{},
      wuyeList:[],
      tableData:{},
      page:1,
      size:100,
    }
  },
  mounted() {
    this.$nextTick(() => {
  		this.getWuyeList();
      window.addEventListener('resize', this.screenAdapter)
      this.screenAdapter();
    })

  },
  methods: {
    initChart() {
      // init第一个参数 ref定义的的，第二个参数主题
      this.chart = echarts.init(this.$refs.main, 'chalk')
      echarts.registerMap("chain", chianJson)
      this.chart.setOption({
        title: {
          text: '',
          left: 20,
          top: 40,
        },
        geo: {
          type: 'map', // 类型
          map: 'chain',
          top: '6%', // 距离顶部
          bottom: '5%', // 距离底部
          itemStyle: { // 地图区域的样式。
            areaColor: '#2E72BF', // 地图整体区域的颜色
            borderColor: '#fff', //地图边界线的颜色
          },
          zoom:1,
          roam:true,
          label: {
              normal: {
                  show: true,
                  textStyle: {
                      color: "rgba(246, 91, 39, 0.5)",
                  },
              }
          },
          // 滚轮缩放的极限控制
          scaleLimit: { 
              min: 0.5, //缩放最小大小
              max: 30, //缩放最大大小
          }
        },
        // 自定义提示框的内容
        tooltip: {
          triggerOn:"click",
          enterable:true,//鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true
          trigger: 'item',
          // 自定义提示框的内容
          formatter(params) {
            return (
              "<div>物业：" +
              params.data.wy_name +
              
              "<div>小区：" +
              params.data.name +
              " <br>地址：" +
              params.data.address +
              "</div>"
            );
          }
        },
        // 散点图
        series:[this.tableData],
        series1: [
          {
            type: 'effectScatter',  //特效散点图
            rippleEffect: { // 涟漪效果
              scale: 8,
              brushType: 'stroke'
            },
            coordinateSystem: 'geo', // 使用坐标
            name: "一线城市",
            data: [
              {name: "上海格欣小区1", value: [116.46, 39.92]},
              {name: "上海格欣小区1111", value: [116.46, 39.62]},
              {name: "上海格欣小区333", value: [116.46, 38.92]},
              {name: "上海格欣小区33", value: [116.46, 36.81]},
              {name: "上海格欣小区31", value: [116.46, 35.81]},
              {name: "上海格欣小区32", value: [116.46, 32.81]},
              {name: "上海格欣小区", value: [121.48, 31.22]},
              {name: "广州格欣小区", value: [113.23, 23.16]},
              {name: "深圳格欣小区", value: [114.07, 22.62]},
            ]
          },
          {
            type: 'effectScatter',  //特效散点图
            rippleEffect: { // 涟漪效果
              scale: 8,
              brushType: 'stroke'
            },
            coordinateSystem: 'geo', // 使用坐标
            name: "二线城市",
            data: [
              {name: "南京格欣小区", value: [118.78, 32.04]},
              {name: "杭州格欣小区", value: [120.19, 30.26]},
              {name: "成都格欣小区", value: [104.06, 30.67]},
              {name: "武汉格欣小区", value: [114.31, 30.52]},
            ]
          },
          {
            type: 'effectScatter',  //特效散点图
            rippleEffect: { // 涟漪效果
              scale: 8,
              brushType: 'stroke'
            },
            coordinateSystem: 'geo', // 使用坐标
            name: "三线城市",
            data: [
              {name: "拉萨格欣小区", value: [91.11, 29.97]},
              {name: "乌鲁木齐格欣小区", value: [87.68, 43.77]},
              {name: "西宁格欣小区", value: [101.74, 36.56]},
              {name: "兰州格欣小区", value: [103.73, 36.03]},
            ]
          },
        ],
        legend: { // 图例组件
          left: '5%',
          bottom: '5%',
          orient: 'vertical', // 竖着排列
          data: ['一线城市', '二线城市', '三线城市']
        },
      })
      this.chart.on('click', async arg =>{
        const provinceInfo = getProvinceMapInfo(arg.name)
        // 如果存在key执行下面内容
        if(provinceInfo.key !== undefined){
          var url = window.location.origin + provinceInfo.path
          // 获取static下面的json数据
          const res = await axios.get(url)
          echarts.registerMap(provinceInfo.key, res.data)
          const changeOption={
            geo:{
              map: provinceInfo.key
            }
          }
          this.chart.setOption(changeOption)
        }
      })

    },
    // 当浏览器的大小发生变化的时候，会调用此方法来完成适配
    screenAdapter() {
      // 获取自适应大小
      const titleFontSize = this.$refs.main.offsetWidth / 100 * 3.6
      console.log("titleFontSize", titleFontSize)
      // 自适应配置
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize // 自适应字体大小
          }
        },
        legend: { // 图例组件
          itemWidth: titleFontSize / 2,
          itemHeight: titleFontSize / 2,
          itemGap: titleFontSize / 2,
          textStyle: {
            fontSize: titleFontSize / 2 // 自适应字体大小
          }
        },
      }
      this.chart.setOption(adapterOption)
      // 自适应
      this.chart.resize()
    },
    // 回退
    revertMap(){
      const revertOption={
        geo:{
          map: 'chain'
        }
      }
      this.chart.setOption(revertOption)
    },

    	// 获取物业公司
		getWuyeList() {
			wuyeApi.getWuyeList().then(res => {
				if (res.state) {
					this.wuyeList = res.data;
          this.formInline.wuye_id=1
          this.getData();
				} else {
					this.$message(res.msg);
				}
			});
		},
    // 获取数据
		getData() {
			let data = {
				pageNumber: this.page,
				pageSize: this.size
			};
			if (this.formInline.name) {
				data['name'] = this.formInline.name.trim();
			}
			if (this.formInline.wuye_id) {
				data['wuye_id'] = this.formInline.wuye_id;
			}
			if (this.date && this.date.length) {
				data['start_time'] = this.date[0];
				data['end_time'] = this.date[1];
			}
			Api.query(data).then(res => {
				if (res.state) {
          res.data.list.forEach(d => {
            d.name=d.xq_name;
            d.value=[d.xq_longitude,d.xq_latitude];
          });
          this.tableData={
            type: 'effectScatter',  //特效散点图
            rippleEffect: { // 涟漪效果
              scale: 5,
              brushType: 'stroke'
            },
            coordinateSystem: 'geo', // 使用坐标
            name: "",
            data:[],
          }
					this.tableData.data = res.data.list;
          console.log(this.tableData)
          this.initChart();
				} else {
					this.$message(res.msg);
				}
			});
		},
  },
}
</script>

<style lang="scss" scoped>
.dashboard-container{
  height: 100%;
  width: 100%;
}
</style>
